<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-tooltip content="用户头像" placement="top">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="user-avatar"></el-avatar>
      </el-tooltip>
      <span>学生基本信息</span>
    </div>
    <el-form label-width="120px" class="student-info-form">
      <el-form-item label="学生姓名">
        <el-tooltip content="休想坏坏" placement="top" :open-delay="300">
          <el-input v-model="student.name" placeholder="请输入学生姓名" disabled>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" slot="suffix" class="input-avatar"></el-avatar>
          </el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="学号">
        <el-tooltip content="休想坏坏" placement="top" :open-delay="300">
          <el-input v-model="student.stu_id" placeholder="请输入学号" disabled>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" slot="suffix" class="input-avatar"></el-avatar>
          </el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="入学年份">
        <el-tooltip content="休想坏坏" placement="top" :open-delay="300">
          <el-input v-model="student.start_year" placeholder="请输入入学年份" disabled>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" slot="suffix" class="input-avatar"></el-avatar>
          </el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="年级">
        <el-tooltip content="休想坏坏" placement="top" :open-delay="300">
          <el-input v-model="student.grade" placeholder="请输入年级" disabled>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" slot="suffix" class="input-avatar"></el-avatar>
          </el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="专业">
        <el-tooltip content="休想坏坏" placement="top" :open-delay="300">
          <el-input v-model="student.major" placeholder="请输入专业" disabled>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" slot="suffix" class="input-avatar"></el-avatar>
          </el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-tooltip content="休想坏坏" placement="top" :open-delay="300">
          <el-input v-model="student.phoneNum" placeholder="请输入电话号码" disabled>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" slot="suffix" class="input-avatar"></el-avatar>
          </el-input>
        </el-tooltip>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: '张三',
        stu_id: '123456789',
        start_year: '2020',
        grade: '大二',
        major: '计算机科学与技术',
        phoneNum: '13800138000'
      }
    };
  }
};
</script>

<style scoped>
.box-card {
  width: 480px;
  margin: 20px auto;
  background-color: #e6f7ff; /* 浅蓝色背景 */
}
.clearfix .user-avatar {
  margin-right: 10px;
  vertical-align: middle;
}
.student-info-form {
  padding: 0 20px;
}
.input-avatar {
  width: 24px;
  height: 24px;
  margin-left: 10px;
}
</style>